<template>
    <div class="flex flex-row items-center h-max box-border border border-solid border-[#CED4DB] rounded-sm text-sm focus-within:border-theme">
        <div class="text-primary px-[10px] flex-none">{{ label }}</div>
        <div class="box-border w-px h-4 bg-[#CED4DB] flex-none"></div>
        <div class="flex-1 control">
            <slot style="font-size: 14px; color: var(--color-primary); width: 100%;" :props="controlProps" />
        </div>
    </div>
</template>
<script lang="ts" setup>
defineOptions({
    name: 'GpFormField',
    inheritAttrs: true
})
defineProps<{
    label: string
}>()
const controlProps = {bordered: false, allowClear: true}
</script>
<style lang="less" scoped>
.control {
    :deep(.ant-input.ant-input),
    :deep(.ant-select-selector.ant-select-selector) {
        font-size: 14px;
        color: var(--color-primary);
    }
}
</style>